<template>
	<div class="banner" >
		<!-- 主界面 -->
		<div class="main" >
			<div class="banner-top">
				<!-- 城市切换 -->
				<div class="city" @click="btn()">
					<label>{{cityName}}</label><i class="iconfont">&#xe600;</i>
				</div>
				<!-- 搜索 -->
				<form class="search">
					<i class="iconfont">&#xe60c;</i>
					<input type="text">
				</form>
			</div>
			<!-- 一排li -->
			<ul class="lis" >
				<li v-for="item in list" :key="item.id" >
					<router-link :to="item.url" >{{item.name}}</router-link>
				</li>
			</ul>
			<div class="swiper banner-swiper">
				<!-- 主体的滑动区 -->
				<ul class="swiper-wrapper">
					<li class="swiper-slide" v-for="item in maps" :key="item.id" >
						<img :src="item.src">
					</li>
				</ul>
				<!--分页器。如果放置在swiper外面，需要自定义样式。-->
				<div class="swiper-pagination"></div>
			</div>
		</div>
	</div>
</template>

<script>
	// 引入State的辅助函数
	import {mapState} from 'vuex';
	// 1.引入vue周期函数
	import { onMounted } from 'vue';
	// 2.引入Swiper的动态组件
	import Swiper , {
		Autoplay ,
		EffectCoverflow ,
		EffectCube ,
		Pagination,
	} from 'swiper';
	// 3.swiper组件应用配置
	Swiper.use( [Autoplay ,EffectCoverflow ,EffectCube ,Pagination] );
	
	// 导出
	export default
	{
		name : 'Banner',
		data()
		{
			return{
				maps : [
						{ id:1 , src:'img/1.jpg' },
						{ id:2 , src:'img/2.jpg' },
						{ id:3 , src:'img/3.jpg'},
						{ id:4 , src:'img/4.jpg' },
						{ id:5 , src:'img/5.jpg' },
						{ id:6 , src:'img/6.jpg' },
						{ id:7 , src:'img/7.jpg' },
						{ id:8 , src:'img/8.jpg' }
					],
				list : [
						{ id:1 , url:'/' , name:'热搜' },
						{ id:2 , url:'/' , name:'赏银杏' },
						{ id:3 , url:'/' , name:'赏枫叶' },
						{ id:4 , url:'/' , name:'秋日骑行' },
						{ id:5 , url:'/' , name:'温泉滑雪' },
					]
			}
		},
		methods : {
			btn(){
				this.$router.push('/city');
			}
		},
		computed:{
			// 接收state内部的cityName变量
			...mapState(['cityName'])
		},
		// 4.设置应用swiper的位置以及具体操作
		setup(){
			onMounted( ()=>{
				new Swiper( '.banner-swiper' , {
					// 循环播放
					loop : true,
					// 设置分页器效果
					pagination : {
						el : '.swiper-pagination'
					},
					// 设置播放项: 时间,不停止,手指经过不暂停自动
					autoplay : {
						delay : 3000,
						stopOnLastSlide : false,
						disableOnInteraction : false
					}
				} )
			} )
		}
	}
	
	
</script>

<style scoped >
	.main
	{
		position: relative;
		width: 100%;
		height: 5.6rem;
		background-color: #F6D83F;
		margin-bottom: 2rem;
	}
	/*顶部样式*/
	.banner-top
	{
		position: absolute;
		left: 0;
		top: 0.3rem;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 0.8rem;
	}
	.banner-top .city
	{
		/* color: white; */
		font-weight: bold;
		font-size: 0.35rem;
		line-height: 0.8rem;
		padding-left: 0.3rem;
		padding-right: 0.4rem;
	}
	.banner-top .city i
	{
		vertical-align: middle;
		padding-left: 0.1rem;
	}
	.banner-top .search
	{
		flex: 1;
		background-color: white;
		border-radius: 0.3rem;
		overflow: hidden;
		line-height: 0.8rem;
		margin-right: 0.6rem;
	}
	.banner-top .search i
	{
		display: inline-block;
		height: 100%;
		font-size: 0.45rem;
		padding-left: 0.2rem;
		vertical-align: middle;
	}
	.banner-top .search input
	{
		border: none;
		width: 80%;
		line-height: 0.7rem;
		text-indent: 1em;
	}
	/*一排li的样式*/
	.lis
	{
		position: absolute;
		width: 100%;
		top: 1.3rem;
		z-index: 5;
		color: red;
		/* border: 1px solid black; */
		font-size: 0.45rem;
	}
	.lis li
	{
		width: 17%;
		line-height: 0.55rem;
		margin-left: 0.25rem;
		text-align: center;
		float: left;
		border-radius: 0.2rem;
		background-color: #ffeea0;
	}
	.lis li:first-child{
		background-color: #f6d83f;
	}
	.lis li a
	{
		font-size: 0.3rem;
		text-decoration: none;
	}
	
	/*轮播区域的样式*/
	.banner-swiper
	{
		width: 95%;
		height: 5.6rem;
		position: absolute;
		border-radius: 0.2rem;
		top: 2.2rem;
		left: 0.25rem;
	}
	.banner-swiper img
	{
		width: 100%;
		height: 100%;
	}
	
	/* 穿透 */
	.swiper-pagination>>>.swiper-pagination-bullet-active
	{
		background-color: #f6d83f;
	}
</style>
